

import { getTableColumns, getTableRows, columnUpdateValue } from "@/services/database";
import { ReactNode, useEffect, useState } from "react";
import { EditableTable, EditableTableColumn } from '@/components/table';
import styled from 'styled-components'
import { PlusOutlined, MinusOutlined, CopyOutlined, MenuOutlined, SyncOutlined, StepBackwardOutlined, StepForwardOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';


import { Button } from '@/components/button';
import { ConnectorDataSource, DataSource } from "@/services";

export const TableContent = (props: { dataSource: ConnectorDataSource, table: string }) => {

    const [columns, setColumns] = useState<Array<EditableTableColumn>>([]);

    const [version, setVersion] = useState<number>(0);

    useEffect(() => {
        //获取表结构
        getTableColumns(props.dataSource, props.table).then((data) => {
            console.log(data);
            setColumns(data);
        }).catch((err) => {
            console.log(err);
        });
        setVersion(new Date().getTime());
    }, [props.dataSource, props.table]);

    return (
        <>
            <EditableTable
                columns={columns}
                rowKey={'_rowid'}
                columnOrder={true}
                sorting={true}
                version={version}
                header={() => {
                    return (
                        <HeaderContainer>

                        </HeaderContainer>
                    );
                }}
                request={async (pagination, columnOrder, sorting) => {
                    //获取数据
                    let data = await getTableRows(props.dataSource, props.table, {}, {}, pagination.pageIndex, pagination.pageSize)
                    return {
                        header: data.header,
                        data: data.values,
                        total: data.total,
                    };
                }}
                onSave={async (rowIndex: number, columnId: string, value: unknown, data: { [key: string]: any }) => {
                    let res = await columnUpdateValue(props.dataSource, props.table, columnId, value, {
                        _rowid: data['_rowid']
                    })
                    return true;
                }}
                pagination={true}
                footer={() => {
                    return (
                        <FooterContainer>
                            {/* <Button width={36} icon={<PlusOutlined />} onClick={async () => {

                            }}></Button>
                            <Button width={36} icon={<MinusOutlined />} onClick={async () => { }}></Button>
                            <Button width={36} icon={<CopyOutlined />} onClick={async () => { }}></Button> */}
                            <Button width={36} icon={<SyncOutlined />} onClick={async () => {
                                setVersion(new Date().getTime());
                            }}></Button>
                        </FooterContainer>
                    )
                }}
            ></EditableTable>
        </>
    );
};

export default TableContent;

const HeaderContainer = styled.div`
    width: 100%;
    height: 40px;
    border-bottom: 1px solid lightgray;
    display: flex;
    justify-content: flex-start;
`;

const FooterContainer = styled.div`
    width: 100%;
    height: 40px;
    border-bottom: 1px solid lightgray;
    display: flex;
    justify-content: flex-start;
`;

const Space = styled.div`
`;